<template>
  <div class="wrapper">
    <el-card>
      <div class="rowDiv">
        <div class="row-left"></div>
        <div class="row-right">
          <el-button type="primary" @click="create_par_menu"
            >添加父类菜单</el-button
          >
        </div>
      </div>
      <div class="menuDiv">
        <draggable
          class="dragArea"
          tag="transition-group"
          :list="state.menuArr"
          :animation="100"
          :group="{ name: 'g1' }"
          item-key="name"
        >
       
          <template #item="{ element, index }">
            <div class="menu-item">
              <div class="item_top">
                <el-col :span="18">
                  <el-select
                    clearable
                   v-model="element.selected" placeholder="请选择">
                    <el-option
                      v-for="item in element.drop_down_list"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-col>
                <i
                  class="el-icon-folder-add document_icon"
                  @click="add(element)"
                ></i>
                <i
                  class="el-icon-folder-delete document_icon"
                  @click="del_menu_item(element)"
                ></i>
              </div>
              <div class="item_footer">
                <h4>{{ element.parent_name }}</h4>
                <draggable
                  class="drag_child_Area"
                  tag="transition-group"
                  :list="element.children"
                  :group="g2 + index"
                  item-key="name"
                >
                  <template #item="{ element }">
                    <div>
                      {{ element.child_name }}
                      <el-button type="text" @click="del(element)">移除</el-button>
                    </div>
                  </template>
                </draggable>
              </div>

              <!-- <nested-draggable :tasks="element.children" /> -->
            </div>
          </template>
          
        </draggable>
      </div>
      <el-row type="flex" justify="center">
        <el-col :span="3"
          ><el-button type="primary" @click="save_menu_seria">保存顺序</el-button></el-col
        >
      </el-row>
      <div></div>
    </el-card>
    <!-- 创建弹窗 -->
    <el-dialog
      title="创建"
      v-model="state.create_model_diaglog"
      width="20%"
      center
    >
      <span>
        <Form
          v-if="state.labelAndType"
          :inline="false"
          :form="state.form"
          :rule="state.rule"
          ref="mutilform"
          :labelAndType="state.labelAndType"
          @form_sub="formsub"
          @form_cancle="state.create_model_diaglog = false"
        ></Form>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { ref, nextTick, reactive, onMounted, getCurrentInstance } from "vue";
import { ElNotification } from "element-plus";
import Form from "@/components/Form.vue";
import draggable from "vuedraggable";
import { useStore } from "vuex";
// import nestedDraggable from "@/components/Drag.vue";
export default {
  name: "menu_manager",
  components: { Form, draggable },
  props: {},
  setup() {
    let mutilform = ref("null");
    const { ctx } = getCurrentInstance();
    let store=useStore();
    let state = reactive({
      create_model_diaglog: false,
      form: {
        parent_id: "",
        rank: "",
        parentArr: [],
      },
      rule: {
        parent_id: [{ required: true, message: "请填写名称", trigger: "blur" }],
        rank: [{ required: true, message: "请填写序号", trigger: "blur" }],
      },
      labelAndType: [
        { model: "rank", label: "序号", type: "input" },
        { model: "parent_id", label: "名称", type: "select", option: [] },
      ],
      menuArr: [],
    });
    // 添加子集
    function add(e) {
      console.log(e);
      if (!e.selected) return ElNotification.error("请选择后在进行操作");
      ctx.$http
        .post("/middle/oa/add_sys_item/", {
          parent_id: e.parent_id,
          api_id: e.selected,
        })
        .then((res) => {
          if (res.errno == 0) {
            ElNotification.success(res.errmsg);
            getOrderlist();
          } else {
            ElNotification.error(res.errmsg);
          }
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }
    // 删除整项
    function del_menu_item(e) {
      if (confirm("确定要删除这一整项数据")) {
        ctx.$http
          .post("/middle/oa/delete_sys_item/", {
            parent_id: e.parent_id,
          })
          .then((res) => {
            if (res.errno == 0) {
              ElNotification.success(res.errmsg);
              getOrderlist();
            } else {
              ElNotification.error(res.errmsg);
            }
          })
          .catch((err) => {
            ElNotification.error(err);
          });
      }
    }
    // 删除单一项
    function del(e) {
      ctx.$http
        .post("/middle/oa/delete_sys_item/", {
          child_id: e.child_id,
        })
        .then((res) => {
          if (res.errno == 0) {
            ElNotification.success(res.errmsg);
            getOrderlist();
          } else {
            ElNotification.error(res.errmsg);
          }
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }
    onMounted(() => {
      getOrderlist();
    });
    // 获取页面数据及弹窗的父级下拉数据
    function getOrderlist() {
      ctx.$http
        .get("/middle/oa/get_item_manage/", {})
        .then((res) => {
          if (res.errno == 0) {
            let menu = res.data.menu_list;
            menu.forEach((v) => {
              v["selected"] = "";
            });
            state.menuArr = menu; //获取所有菜单
            // 获取窗口的父级下拉
            state.form.parentArr = res.data.parent_drop_down;
            let par_select_data = res.data.parent_drop_down;
            let newArr = [];
            par_select_data.map((v) => {
              v["value"] = v.id;
              v["label"] = v.name;
              newArr.push(v);
            });
            state.labelAndType.forEach((v) => {
              if (v.type == "select") {
                v.option = newArr;
              }
            });
          }
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }
    // 删除菜单子项
    function delete_menu_item(id) {
      ctx.$http
        .post("/middle/oa/delete_child_item/", {
          child_id: id,
        })
        .then((res) => {
          if (res.errno == 0) {
            getOrderlist();
          }
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }
    // 创建菜单
    function create_par_menu() {
      state.create_model_diaglog = true;
      console.log(mutilform);
      mutilform.value.$refs.form.clearValidate();
      state.form.rank = "";
      state.form.parent_id = "";
    }
    // 模块提交
    function formsub(e) {
      ctx.$http
        .post("/middle/oa/add_parent_item/", {
          parent_id: state.form.parent_id,
          rank: state.form.rank,
        })
        .then((res) => {
          if (res.errno == 0) {
            ElNotification.success(res.errmsg);
            state.create_model_diaglog = false;
            getOrderlist();
            store.dispatch("get_menu");
          } else {
            ElNotification.error(res.errmsg);
          }
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }
    // 保存顺序
    function save_menu_seria() {
      let data=state.menuArr;
      let newArr=[];
      data.forEach((v)=>{
        let obj={}
        obj['api_id']=v.api_id;
        obj['children']=[]
        if(v.children.length){
          v.children.forEach((item)=>{
            obj['children'].push({'api_id':item.api_id})
          })
        }
        newArr.push(obj)
      })
      console.log(newArr);
      ctx.$http
        .post("/middle/oa/edit_sys_item/", {
          "menu":JSON.stringify(newArr)
        })
        .then((res) => {
          if (res.errno == 0) {
            ElNotification.success(res.errmsg);
            getOrderlist();
            store.dispatch("get_menu");
          }else{
            ElNotification.error(res.errmsg);
          }
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }
    return {
      save_menu_seria,
      create_par_menu,
      state,
      mutilform,
      getOrderlist,
      formsub,
      add,
      del,
      del_menu_item
    };
  },
};
</script>
<style lang="scss" scoped>
.wrapper {
  height: 100%;
  .el-card {
    height: 100%;
    overflow-y: auto;
    .menuDiv {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 20px;
      .menu-item {
        cursor: move;
        margin-right: 20px;
        border: 1px solid gainsboro;
        border-radius: 4px;
        min-height: 100px;
        .document_icon {
          font-size: 26px;
          cursor: pointer;
        }
      }
      .item_top {
        padding: 10px;
        border-bottom: 1px solid gainsboro;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .item_footer {
        padding: 0 10px;
      }
    }
  }
  .sort-move {
    transition: transform 0.3s;
  }
  .aaaa {
    border: 1px solid red;
  }
}
.dragArea {
  display: flex;
}
.flip-list-move {
  transition: transform 0.5s;
}
.no-move {
  transition: transform 0s;
}
</style>